<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Cadastro de clientes</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </h:head>
    <h:body>
        <ui:composition template="./templates/TemplatePagina.xhtml">

            <ui:define name="barraTitulo">

            </ui:define>
            <ui:define name="barraMenu">

            </ui:define>

            <ui:define name="conteudo">
                <h:form>
                    <p:panel header="Novo Cliente">
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Nome: " for="campo-nome"/>
                            <p:inputText id="campo-nome" value="#{clienteController.selecionado.nome}" size="40" required="true" requiredMessage="o campo nome não pode ser nulo"/>

                            <h:outputLabel value="Sobrenome: " for="campo-sobrenome"/>
                            <p:inputText id="campo-sobrenome" value="#{clienteController.selecionado.sobrenome}" size="40" required="true" requiredMessage="o campo sobrenome não pode ser nulo"/>

                            <h:outputLabel value="CPF: " for="campo-cpf"/>
                            <p:inputMask id="campo-cpf" value="#{clienteController.selecionado.cpf}" mask="999.999.999-99"  size="15" required="true" requiredMessage="o campo cpf não pode ser nulo"/>

                            <p:outputLabel for="mask" value="Data de Nascimento" />
                            <p:calendar id="mask" value="#{clienteController.selecionado.dataNascimento}" pattern="dd-MM-yyyy" mask="true" />

                            <h:outputLabel value="Endereço: " for="campo-endereco" />
                            <p:inputText id="campo-endereco" value="#{clienteController.selecionado.endereco}"  size="40" rendered="true" requiredMessage="campo obrigatório"/>


                            <h:outputLabel value="Bairro:" for="campo-bairro" />
                            <p:inputText id="campo-bairro" value="#{clienteController.selecionado.bairro}" size="40" />


                            <h:outputLabel value="E-mail: " for="campo-email" />
                            <p:inputText id="campo-email" value="#{clienteController.selecionado.email}" size="40" required="true" requiredMessage="campo email é obrigatorio"/>


                            <h:outputLabel value="Telefone: " for="campo-telefone" />
                            <p:inputMask id="campo-telefone" value="#{clienteController.selecionado.telefone}" mask="(99) 9999-9999"/>

                            <p:outputLabel/>
                            <p:commandButton action="#{clienteController.adicionar}" value="Cadastrar" update="tabela"/>  
                            <h:panelGroup/>
                        </h:panelGrid>

                    </p:panel>
                    <h:outputText value=" "/>
              
                        <p:panel>
                            <p:dataTable value="#{clienteController.itens}" var="item" scrollable="true" scrollHeight="150" id="tabela">
                                <p:column headerText="Código">
                                    <h:outputText value="#{item.id}"/>
                                </p:column>
                                <p:column headerText="Nome">
                                    <h:outputText value="#{item.nome}"/>
                                </p:column>

                                <p:column headerText="Nome">
                                    <h:outputText value="#{item.sobrenome}"/>
                                </p:column>

                                <p:column headerText="CPF" filterBy="#{item.cpf}">
                                    <h:outputText value="#{item.cpf}"/>
                                </p:column>
                                <p:column headerText="Data de Nascimento">
                                    <h:outputText value="#{item.dataNascimento}">
                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                    </h:outputText>
                                </p:column>

                                <p:column headerText="Endereço">
                                    <h:outputText value="#{item.endereco}"/>
                                </p:column>

                                <p:column headerText="Bairro">
                                    <h:outputText value="#{item.bairro}"/>
                                </p:column>

                                <p:column headerText="Email">
                                    <h:outputText value="#{item.email}"/>
                                </p:column>

                                <p:column headerText="Telefone">
                                    <h:outputText value="#{item.telefone}"/>
                                </p:column>

                                <p:column headerText="&nbsp;">
                                    <h:commandLink action="#{clienteController.prepararEdicao}">
                                        <h:graphicImage library="img" name="editar.png"/>
                                    </h:commandLink>

                                    <h:commandLink action="#{clienteController.remover}">
                                        <h:graphicImage library="img" name="remover.png"/>
                                    </h:commandLink>
                                </p:column>

                            </p:dataTable>
                        </p:panel>

                </h:form>

            </ui:define>

            <ui:define name="rodape">

            </ui:define>

        </ui:composition>
    </h:body>
</html>
